<template>
    <div>
        <el-table :data="users" style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column label="真实姓名" width="100">
                <template #default="scope">
                    <el-input
                        v-if="
                            editCell.index == scope.$index &&
                            editCell.isEdit&&
                            editCell.key == 'realName'
                        "
                        v-model="scope.row.realName"
                        @blur="handleUpdate({id:scope.row.id,realName:scope.row.realName})"
                    />
                    <span v-else @dblclick="handleShowEdit(scope.$index,'realName')">{{ scope.row.realName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="分配操作">
                <template #default="scope">
                    <el-button
                        type="default"
                        size="small"
                        @click="handleAssignRole(scope.row.id)"
                        >分配角色</el-button
                    >
                    <el-button
                        type="default"
                        size="small"
                        @click="handleAssignAuthority(scope.row.id)"
                        >分配权限</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleUpdate(scope.row.id)"
                        >修改</el-button
                    >
                    <el-button
                        type="danger"
                        size="small"
                        @click="handleDelete(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "../../stores/user";
import { url } from "../../service/index";
import { storeToRefs } from "pinia";
import { update } from "../../service/user";
const userStore = useUserStore();
const { fetchUserRole } = userStore;
const { userRoleVisible } = storeToRefs(userStore);
const props = defineProps(["users"]);
const emits = defineEmits(["show"]);
const editCell = reactive({
    index: 0,
    key: "",
    isEdit: false,
});
function handleShowEdit(index,key){
    editCell.index = index;
    editCell.key = key;
    editCell.isEdit = true;
}
async function handleUpdate(user) {
    // console.log("handleUpdate",id);
    // visible.value = true;
    await update(user);
    editCell.isEdit = false;
}
function handleDelete(id) {
    ElMessageBox.confirm("是否删除?", "警告", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    }).then(async () => {
        emits("show");
    });
}
async function handleAssignRole(id){
    await fetchUserRole(id);
    userRoleVisible.value = true;
}
</script>
<style scoped>
.head-img {
    width: 50px;
    height: 50px;
}
</style>
